/* eslint-disable vue/no-unused-vars */
<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item style="float: left;font-size: 30px">
          <el-avatar shape="square" :size="50" src="https://images.cnblogs.com/cnblogs_com/zeyfra/1871834/o_19a35456.png" /><font color="#41B883"> 泽塔</font>  <font>程序设计竞赛团队平台</font>
        </el-menu-item>
        <el-menu-item>
          <el-button type="primary" plain size="mini" icon="el-icon-user-solid" @click="handleLogin">登录</el-button>
        </el-menu-item>
        <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">一个菜单</a></el-menu-item>

        <el-submenu index="4" style="float: right">
          <template slot="title">其他OJ</template>
          <el-menu-item index="4-1" style="float: none"><a href="https://www.nowcoder.com/exam/oj" target="_blank">牛客网</a></el-menu-item>
          <el-menu-item index="4-2" style="float: none"><a href="https://www.acwing.com/" target="_blank">ACWing</a></el-menu-item>
          <el-menu-item index="4-3" style="float: none"><a href="http://codeforces.com/" target="_blank">CodeForces</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="3">我要刷题</el-menu-item>
        <el-menu-item index="2">公告</el-menu-item>
        <el-menu-item index="1">首页</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <div>
        <div style="float: left;width: 50%;margin-top: 50px">
          <el-table
            :data="tableData1"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="notice"
              label="通知公告"
              width="450px"
            >
              <template slot-scope="scope">
                <a href="scope.row.notice" target="_blank" class="buttonText">{{ scope.row.notice }}</a>
              </template>
            </el-table-column>

            <el-table-column
              prop="date1"
              width="100"
            >
              <template slot="header" slot-scope="scope">
                <a href="" target="_blank">More<<</a>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div style="float: right; width: 50%;margin-top: 50px">
          <el-table
            :data="tableData2"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="msg"
              label="ACM大事记"
              width="450px"
            >
              <template slot-scope="scope">
                <a href="scope.row.msg" target="_blank" class="buttonText">{{ scope.row.msg }}</a>
              </template>
            </el-table-column>

            <el-table-column
              prop="date2"
              width="100"
            >
              <template slot="header" slot-scope="scope">
                <a href="" target="_blank">More<<</a>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-main>
    <el-footer>
      <el-footer>Copyright &copy;2020-2022 by ZeyFra</el-footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: '1',
      username: '你好，请登录',
      tableData1: [{
        notice: '校内天梯选拔赛开始报名啦！',
        date1: '2020-3-6'
      }, {
        notice: '校内天梯选拔赛开始报名啦！',
        date1: '2020-3-6'
      }, {
        notice: '校内天梯选拔赛开始报名啦！',
        date1: '2020-3-6'
      }, {
        notice: '校内天梯选拔赛开始报名啦！',
        date1: '2020-3-6'
      }],
      tableData2: [{
        msg: '校内天梯选拔赛开始报名啦！',
        date2: '2020-3-6'
      }, {
        msg: '校内天梯选拔赛开始报名啦！',
        date2: '2020-3-6'
      }, {
        msg: '校内天梯选拔赛开始报名啦！',
        date2: '2020-3-6'
      }, {
        msg: '校内天梯选拔赛开始报名啦！',
        date2: '2020-3-6'
      }]
    }
  },
  methods: {
    handleLogin() {
      this.$router.push({
        name: 'Login'
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      var name
      if (key === '2') {
        name = 'Inform'
      } else if (key === '1') {
        name = 'Index'
      } else if (key === '3') {
        name = 'Problem'
      }
      this.$router.push({
        name,
        params: {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-footer {
    color: rgb(0, 0, 0);
    text-align: center;
    line-height: 60px;
    margin-top: auto;
    margin-bottom: 10px;
  }
.el-menu {
  .el-menu-item {
    float: right;
  }
}
 a{
    color: #1ba3da;
}
</style>
